<template>
  <div class="page-goods df">
    <div class="navs fn">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item v-for="item in navList" :key="item" :title="item"
          @click="handleMenu" />
      </van-sidebar>
    </div>
    <div class="right f1">
      <!-- 商品列表 -->
      <div class="goods-list">
        <div class="goods-item" v-for="item in goodsList" :key="item.name">
          <h3 class="title">{{item.name}}</h3>
          <!-- 食品列表 -->
          <div class="foods-list">
            <van-card v-for="subItem in item.foods" :key="subItem.id" num="2"
              :price="subItem.price" :desc="subItem.goodsDesc"
              :title="subItem.name" :thumb="subItem.imgUrl" />
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import BScroll from "@better-scroll/core";
export default {
  data() {
    return {
      activeKey: 0,
      heightList: [],
      loading: false, //左右联动节流--1
    };
  },
  computed: {
    ...mapState("shop", ["goodsList"]),
    ...mapGetters("shop", ["navList"]),
  },
  methods: {
    //点击左侧菜单
    handleMenu(index) {
      // console.log("index :>> ", index);
      /* 方法一 */
      //获取节点
      const nodeJs = document.querySelectorAll(".goods-item");
      console.log("nodeJs :>> ", nodeJs);
      //右侧滚动
      this.bs2.scrollToElement(nodeJs[index], 600);
      /**方法二
       * this.activeKey=index
       //获取节点
      const nodeJs = document.querySelectorAll(".goods-item");
      //右侧滚动
      this.bs2.scrollToElement(nodeJs[this.activeKey], 600);
       */
      this.loading = true; //左右联动节流--2
    },
    //滚动渲染
    renderScroll() {
      // 左侧菜单滚动
      this.$nextTick(() => {
        this.bs1 = new BScroll(".navs", {
          click: true,
          // probeType:3,//3 派发滚动事件
        });
        // 右侧食物列表滚动
        this.bs2 = new BScroll(".right", {
          click: true,
          probeType: 3, //3 派发滚动事件
        });
        let nodeJs1 = document.querySelectorAll(".goods-item");
        nodeJs1.forEach((el) => {
          this.heightList.push(el.clientHeight);
          // console.log('this.heightList :>> ', this.heightList);
        });
        //监听bs2滚动
        this.bs2.on("scroll", ({ y }) => {
          if (this.loading) return; //左右联动节流--3
          // console.log(y);
          let absY = Math.abs(y);
          // console.log('absY :>> ', absY);

          /* 
              索引0  y>0 && y<1盒子
              索引1  y>1盒子 && y<1+2 盒子
              索引2  y>1+2盒子 && y<1+2+3 盒子
              大于前面盒子的和<前面盒子的和+自己高度
            */
          //求和
          this.heightList.reduce((total, cur, index) => {
            if (absY > total && absY < total + cur) {
              this.activeKey = index;
            }
            return total + cur;
          }, 0);
        });
        this.bs2.on("scrollEnd", () => {
          this.loading = false;
        }); //左右联动节流--4
      });
    },
  },
  async created() {
    //初始化发送请求
    await this.$store.dispatch("shop/A_getGoodsList");
    this.renderScroll();
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.page-goods {
  height: 100%;
}
.title {
  height: 40px;
  line-height: 40px;
  background: #f4f4f4;
  padding-left: 5px;
  border-left: 6px solid #ddd;
}
</style>